<template>
  <view class="order-item" @tap="$emit('click', $event)" :class="{ xj: !thumb }">
    <view class="image"><image :src="thumb || '/static/images/address/none.jpg'"></image></view>
    <view class="content">
      <view class="title" v-text="title"></view>
      <view class="pn">
        <view class="price">{{ price / amount }}</view>
        <view class="number">x{{ amount }}</view>
      </view>
      <view class="total">合计：{{ price  }}</view>
      <view class="order-status">
        <view class="label">订单状态:</view>
        <view class="text" v-if="status === 0">等待发货</view>
        <view class="text" v-if="status === 1">已发货</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    thumb: String,
    title: String,
    price: {
      type: [String, Number],
      default: 0
    },
    amount: {
      type: [String, Number],
      default: 1
    },
    status: [String, Number]
  }
};
</script>

<style lang="scss" scoped>
.order-item {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20upx 10upx;
  border-radius: 10upx;
  &.xj {
    position: relative;
    filter: grayscale(100%);
    filter: gray;
    &:before {
      content: "已下架";
      text-align: center;
      line-height: 200upx;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(224, 224, 223, 0.7);
      font-size: 40upx;
    }
  }
  .image {
    padding: 10upx;
    width: 180upx;
    height: 160upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    width: calc(100% - 200upx);
    color: #3c3c3c;
    view {
      line-height: 44upx;
    }
    .title {
      font-size: 32upx;
      @include line-clamp(2);
    }
    .pn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: #ff7b05;
      }
    }
    .total {
    }
    .order-status {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
</style>
